<template>
	<transition name="el-fade-in-linear" appear>
		<div id="login" v-if="modelValue" class="jc" @click="hideSelf">
			<transition name="el-zoom-in-center" @after-leave="transitionComplete">
				<div class="item-wapper" @click.stop v-if="isShowLogin">
					<div class="login">
						<h2>登录</h2>
						<el-form ref="loginForm" :model="loginForm" size="large" :rules="loginRules" label-position="top">
							<el-form-item prop="username" label="用户名"><el-input v-model="loginForm.username" placeholder="请输入用户名..."></el-input></el-form-item>
							<el-form-item prop="password" label="密码"><el-input v-model="loginForm.password" placeholder="请输入密码..." type="password"></el-input></el-form-item>
							<el-form-item prop="yzm" label="验证码">
								<div class="yzm-row">
									<el-input v-model="loginForm.yzm" placeholder="验证码" @keydown.enter.native="onSubmit"></el-input>
									<img :src="yzmSrc" @click="refreshYzm" />
								</div>
							</el-form-item>
							<el-form-item>
								<div class="jc" style="text-align: right;width: 100%;">
									<el-button @click="showRegister">注册</el-button>
									<el-button type="primary" @click="onSubmit">立即登录</el-button>
								</div>
							</el-form-item>
						</el-form>

						<div class="other-login jc">
							<div class="vx jc">
								<svg fill="#60c84d" viewBox="0 0 24 24" width="20" height="20">
									<path
										d="M2.224 21.667s4.24-1.825 4.788-2.056C15.029 23.141 22 17.714 22 11.898 22 6.984 17.523 3 12 3S2 6.984 2 11.898c0 1.86.64 3.585 1.737 5.013-.274.833-1.513 4.756-1.513 4.756zm5.943-9.707c.69 0 1.25-.569 1.25-1.271a1.26 1.26 0 0 0-1.25-1.271c-.69 0-1.25.569-1.25 1.27 0 .703.56 1.272 1.25 1.272zm7.583 0c.69 0 1.25-.569 1.25-1.271a1.26 1.26 0 0 0-1.25-1.271c-.69 0-1.25.569-1.25 1.27 0 .703.56 1.272 1.25 1.272z"
										fill-rule="evenodd"
									></path>
								</svg>
								微信
							</div>
							<div class="qq jc" @click="requestQQLogin">
								<svg fill="#50c8fd" viewBox="0 0 24 24" width="20" height="20">
									<path
										d="M12.003 2c-2.265 0-6.29 1.364-6.29 7.325v1.195S3.55 14.96 3.55 17.474c0 .665.17 1.025.281 1.025.114 0 .902-.484 1.748-2.072 0 0-.18 2.197 1.904 3.967 0 0-1.77.495-1.77 1.182 0 .686 4.078.43 6.29 0 2.239.425 6.287.687 6.287 0 0-.688-1.768-1.182-1.768-1.182 2.085-1.77 1.905-3.967 1.905-3.967.845 1.588 1.634 2.072 1.746 2.072.111 0 .283-.36.283-1.025 0-2.514-2.166-6.954-2.166-6.954V9.325C18.29 3.364 14.268 2 12.003 2z"
										fill-rule="evenodd"
									></path>
								</svg>
								QQ
							</div>
						</div>
					</div>
				</div>
			</transition>

			<transition name="el-zoom-in-center" @after-leave="transitionComplete">
				<div class="item-wapper" @click.stop v-if="isShowRegister">
					<div class="register">
						<h2>注册1/2</h2>
						<el-form ref="usernameForm" :model="usernameForm" size="medium" :rules="usernameRules">
							<el-form-item prop="username" label="用户名"><el-input v-model="usernameForm.username" placeholder="用户名/手机号"></el-input></el-form-item>
							<el-form-item prop="yzm" label="验证码">
								<div class="yzm-row">
									<el-input v-model="usernameForm.yzm" placeholder="请输入验证码"></el-input>
									<img :src="yzmSrc" @click="refreshYzm" />
								</div>
							</el-form-item>
							<el-form-item>
								<div class="jc">
									<el-button @click="showLogin">返回登录</el-button>
									<el-button type="primary" @click="sendEmailYzm">下一步</el-button>
								</div>
							</el-form-item>
						</el-form>
					</div>
				</div>
			</transition>

			<transition name="el-zoom-in-center" @after-leave="transitionComplete">
				<div class="item-wapper" @click.stop v-if="isShowEmailRegister">
					<div class="register">
						<h2>注册2/2</h2>
						<el-form ref="registerForm" :model="registerForm" size="medium" :rules="registerRules">
							<el-form-item prop="username" label="用户名"><el-input disabled v-model="registerForm.username" placeholder="你不该看到这句话"></el-input></el-form-item>
							<el-form-item prop="password" label="密码"><el-input v-model="registerForm.password" placeholder="请输入密码..." type="password"></el-input></el-form-item>
							<el-form-item prop="password2" label="确认密码"><el-input v-model="registerForm.password2" placeholder="请再次输入密码..." type="password"></el-input></el-form-item>
							<el-form-item prop="yzm" label="用户名验证码">
								<div class="yzm-row"><el-input v-model="registerForm.yzm" placeholder="请到用户名中查收验证码"></el-input></div>
							</el-form-item>
							<el-form-item>
								<div class="jc">
									<el-button @click="showLogin">返回登录</el-button>
									<el-button type="primary" @click="handlerRegister">立即注册</el-button>
								</div>
							</el-form-item>
						</el-form>
					</div>
				</div>
			</transition>
			<div id="qq-login-btn">
				
			</div>
		</div>
	</transition>
</template>
<script>
import { BASE_URL } from '@/puigins/request.js';
// import QC from '@/assets/js/qc_jssdk.js';
import isPE from '@/utils/isPE.js';
import config from '@/config/index.js'
import {userLogin,requestYzm,registerUser,qqLogin} from '@/api/user.js'
export default {
	props: {
		modelValue: {
			type: Boolean,
			default: false
		}
	},
	data() {
		let validatePass2 = (rule, value, callback) => {
			if (value === '') {
				callback(new Error('请再次输入密码'));
			} else if (value !== this.registerForm.password) {
				callback(new Error('两次输入密码不一致!'));
			} else {
				callback();
			}
		};
		let validateUsername = (rule, value, callback) => {
			if (value === '') {
				callback(new Error('请输入用户名'));
			} else if (value.match(/^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,5}$/)) {
				callback();
			} else if (value.match(/^((13[0-9])|(14[0,1,4-9])|(15[0-3,5-9])|(16[2,5,6,7])|(17[0-8])|(18[0-9])|(19[0-3,5-9]))\d{8}$/)) {
				callback();
			} else {
				callback(new Error('非法的用户名格式'));
			}
		};
		return {
			loginRules: {
				username: [{ required: true, message: '请输入用户名', trigger: 'blur' }, { max: 32, message: '用户名长度应在32字符内', trigger: 'blur' }],
				password: [{ required: true, message: '请输入密码', trigger: 'blur' }, { max: 64, message: '密码长度应在64字符内', trigger: 'blur' }],
				yzm: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
			},
			usernameRules: {
				username: [
					{ required: true, message: '请输入用户名', trigger: 'blur' },
					{ max: 50, message: '用户名长度应在50字符内', trigger: 'blur' },
					{ validator: validateUsername, trigger: 'blur' }
				],
				yzm: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
			},
			registerRules: {
				username: [{ required: true, message: '请输入用户名', trigger: 'blur' }, { max: 50, message: '用户名长度应在50字符内', trigger: 'blur' }],
				password: [{ required: true, message: '请输入密码', trigger: 'blur' }, { max: 64,min:6, message: '密码长度应在6~60字符内', trigger: 'blur' }],
				password2: [{ required: true, message: '请再次输入密码', trigger: 'blur' }, { validator: validatePass2, trigger: 'blur' }],
				yzm: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
			},
			loginForm: {
				username: '',
				password: '',
				yzm: ''
			},
			usernameForm: {
				username: '',
				yzm: ''
			},
			registerForm: {
				username: '',
				password: '',
				password2: '',
				yzm: ''
			},
			t1: 0,
			isShowRegister: false,
			isShowLogin: true,
			isShowEmailRegister: false,
			yzmSrc: BASE_URL + 'img/yzm?i=' + new Date().getTime()
		};
	},
	mounted() {
		this.$nextTick(() => {
			const body = document.querySelector('body');
			if (body.append) {
				body.append(this.$el);
			} else {
				body.appendChild(this.$el);
			}
		});
		this.refreshYzm();
	},
	methods: {
		refreshYzm() {
			let t2 = new Date().getTime();
			if (t2 - this.t1 > 1000) {
				this.t1 = t2;
			} else {
				this.$message.closeAll();
				this.$message.warning('操作太快了');
				return;
			}
			this.yzmSrc = BASE_URL + 'img/yzm?i=' + t2;
			this.loginForm.yzm=''
		},
		onSubmit() {
			this.$refs.loginForm.validate(valid => {
				if (valid) {
					userLogin(this.loginForm).then(res => {
						this.$message.closeAll();
						if (res.code == 200) {
							this.$message.success("登录成功");
							this.$refs.loginForm.resetFields();
							this.$emit('input',false)
							this.$store.commit("user/setUser",res.data)
							this.$emit('login-success')
						} else {
							this.$msgError(res)
							this.refreshYzm()
						}
					});
				} else {
					return false;
				}
			});
		},
		hideSelf() {
			this.$emit('update:modelValue', false);
			this.clearObjectValue(this.usernameForm)
			this.clearObjectValue(this.registerForm)
			this.clearObjectValue(this.loginForm)
		},
		requestQQLogin() {
			let domId="qq-login-btn"
			QC.Login({
			       btnId:domId	//插入按钮的节点id
			});
			let qqLoginCallBack=config.qqLoginCallBack
			window[qqLoginCallBack]=(openId,accessToken)=>{
				console.log("被调用QQ登录的回调",openId,accessToken)
				window[qqLoginCallBack]=undefined
				qqLogin(openId,accessToken).then(res=>{
					if (res.code == 200) {
						this.$store.commit('user/setUser', res.data);
						this.hideSelf()
					}else{
						this.$msgError(res)
						this.$emit('update:modelValue', true);
					}
				})
			}
			QC.Login.signOut()
			this.$nextTick(()=>{
				document.getElementById(domId).getElementsByTagName('a')[0].click()
			})
			// let callbackURL = config.QQ_CALLBACK;
			// let appid = config.QQ_APPID;
			// let qqLoginCallBack=config.qqLoginCallBack
			// window[qqLoginCallBack]=(openId,accessToken)=>{
			// 	console.log("被调用QQ登录的回调",openId,accessToken)
			// 	window[qqLoginCallBack]=undefined
			// 	qqLogin(openId,accessToken).then(res=>{
			// 		if (res.code == 200) {
			// 			this.$store.commit('user/setUser', res.data);
			// 			this.hideSelf()
			// 		}else{
			// 			this.$msgError(res)
			// 		}
			// 	})
			// }
			// if (isPE()) {
			// 	let win = QC.Login.showPopup({
			// 		appId: appid,
			// 		redirectURI: `${callbackURL}?rd=`+this.$route.path
			// 	});
			// } else {
			// 	let url = `https://graph.qq.com/oauth2.0/show?which=Login&display=pc&client_id=${appid}&response_type=token&scope=all&redirect_uri=${callbackURL}`;
			// 	let iHeight = 500;
			// 	let iWidth = 750;
			// 	var iTop = (window.innerHeight - iHeight) / 2;
			// 	//获得窗口的水平位置
			// 	var iLeft = (window.innerWidth - iWidth) / 2;
			// 	let win = window.open(
			// 		url,
			// 		name,
			// 		'height=' +
			// 			iHeight +
			// 			',innerHeight=' +
			// 			iHeight +
			// 			',width=' +
			// 			iWidth +
			// 			',innerWidth=' +
			// 			iWidth +
			// 			',top=' +
			// 			iTop +
			// 			',left=' +
			// 			iLeft +
			// 			',status=no,toolbar=no,menubar=no,location=no,resizable=no,scrollbars=0,titlebar=no'
			// 	);
		},
		showRegister() {
			this.showDisplay('isShowRegister');
		},
		showLogin() {
			this.showDisplay('isShowLogin');
		},
		transitionComplete() {
			if (this.nextDisplay) {
				this[this.nextDisplay] = true;
			}
		},
		sendEmailYzm() {
			this.$refs.usernameForm.validate(valid => {
				if (valid) {
					requestYzm(this.usernameForm).then(res => {
						if (res.code == 200) {
							this.$message.success(res.data)
							this.registerForm.username=this.usernameForm.username
							this.showDisplay('isShowEmailRegister');
						} else {
							this.$msgError(res);
						}
					});
				} else {
					return false;
				}
			});
		},
		handlerRegister() {
			this.$refs.registerForm.validate(valid => {
				if (valid) {
					registerUser(this.registerForm).then(res => {
						if (res.code == 200) {
							this.$message.success(res.data)
							this.clearObjectValue(this.usernameForm)
							this.clearObjectValue(this.loginForm)
							this.loginForm.username=this.registerForm.username
							this.showDisplay('isShowLogin');
						} else {
							this.$msgError(res);
						}
					});
				} else {
					return false;
				}
			});
		},
		showDisplay(name) {
			this.isShowRegister = false;
			this.isShowLogin = false;
			this.isShowEmailRegister = false;
			this.nextDisplay = name;
		},
		clearObjectValue(obj){
			for(let k in obj){
				obj[k]=null
			}
		}
	},
	watch: {
		modelValue(v) {
			let app = document.getElementById('app');
			if (v) {
				app.classList.add('app-blur');
			} else {
				app.classList.remove('app-blur');
			}
		}
	}
};
</script>

<style lang="scss">
.app-blur {
	filter: blur(1px);
}
#login {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.12);
	z-index: 500;
	#qq-login-btn{
		display: none;
	}
	.item-wapper {
		width: 330px !important;
		// perspective: 1000px;
		background-color: #fff;
		border-radius: 15px;
		padding: 15px;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		> div {
			display: flex;
			flex-direction: column;
			justify-content: center;
			h2 {
				text-align: center;
			}
		}
		.login {
			.other-login {
				gap: 15px;
				height: 40px;
			}
		}
		.register {
		}
		.yzm-row {
			width: 100%;
			display: flex;

			img {
				width: 120px;
				margin-left: 10px;
			}
		}
	}
}
</style>
